<template>
    <div class="topContainer" v-loading="topLoading">
        <el-card class="topContainerCard">
            <div style="display: flex; justify-content: space-between">
                <span>流程名称：{{currentFlowName}}</span>
                <div>
                    <div v-if="checkIsCanSave" style="display: inline-block;width: 240px; height: 30px; background-color: rgba(238,183,5,0.56);margin-right: 20px; text-align: center">
                    <span style="color: rgba(248,143,6,0.98); line-height: 30px">
                        历史版本只可查看，不可修改
                    </span>
                    </div>
                    <el-select v-model="currentVersion" placeholder="版本" style="width: 200px;margin-right: 10px" @change="selectChange()" >
                        <el-option
                            v-for="item in currentFlowVersionList"
                            :key="item.version"
                            :label="item.innerName"
                            :value="item.version"
                        />
                    </el-select>
                    <el-button @click="closeCurrentPage()">关闭</el-button>
                    <el-button type="primary" :loading="saveFlowJsonLoading" :disabled="checkIsCanSave" @click="saveFlowJsonInfo()">保存</el-button>
                </div>
            </div>
        </el-card>
    </div>

    <div :style="'margin-top: 100px; width: ' + jsonInfo['maxWidth'] + 'px'">
        <component :is="jsonInfo['type']" :jsonInfo="jsonInfo" :globalJson="jsonInfo"></component>
    </div>
</template>

<script>
import {getMaxWidth, parseMultiInfo} from "@/utils/flowCommon";
import {queryFlowInfo, queryFlowVersionInfo, queryFlowVersionList, saveFlowJson} from "@/request/flow";
import {ElNotification} from "element-plus";

export default {
    name: "BuildFlow",
    data() {
        return {
            jsonInfo: {},
            currentFlowName: "",
            currentVersion: 0,
            currentFlowVersionList: [],
            saveFlowJsonLoading: false,
            topLoading: false
        }
    },
    methods: {
        randomNumber() {
            return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
        },
        generateUUID() {
            return (this.randomNumber() + this.randomNumber() + "-" + this.randomNumber() + "-" + this.randomNumber() +
                "-" + this.randomNumber() + "-" + this.randomNumber() + this.randomNumber() + this.randomNumber());
        },
        selectChange() {
            this.topLoading = true
            let currentFlowId = this.$route.query.id;
            let currentQueryParams = this.$route.query;
            this.$router.replace({
                path: this.$route.path,
                query: {
                    id: currentQueryParams.id,
                    version: this.currentVersion
                }
            })
            // 查询历史版本
            queryFlowVersionInfo({version: this.currentVersion, resourceId: currentFlowId}).then(versionRes => {
                if (versionRes.code === "200") {
                    let jsonStr = versionRes.data.flowJson
                    this.jsonInfo = JSON.parse(jsonStr)
                    this.currentFlowName = versionRes.data.nameCn + ' - ' + versionRes.data.nameEn;
                }
                this.topLoading = false;
            }).catch(res => {
                this.topLoading = false;
            })
        },
        closeCurrentPage() {
            window.close();
        },
        saveFlowJsonInfo() {
            let currentFlowId = this.$route.query.id;
            this.saveFlowJsonLoading = true;
            // 保存json
            saveFlowJson({id: currentFlowId, flowJson: JSON.stringify(this.jsonInfo)}).then(res => {
                if (res.code === "200") {
                    this.saveFormJsonLoading = false;
                    ElNotification({
                        title: 'Success',
                        message: res.message,
                        type: 'success'
                    })
                    // 延迟一秒关闭页面
                    setTimeout(() => {
                        window.close();
                    }, 1000);
                }
                this.saveFlowJsonLoading = false;
            }).catch(res => {
                this.saveFlowJsonLoading = false;
            })
        }
    },
    mounted() {
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
        parseMultiInfo(this.jsonInfo);
        getMaxWidth(this.jsonInfo);
    },
    computed: {
        checkIsCanSave() {
            if (this.currentFlowVersionList && this.currentFlowVersionList.length > 0) {
                // 如果当前表单存在草稿版本，那么只有草稿版本可以编辑，其他版本都不可以编辑
                if (this.currentFlowVersionList[0].version === 0) {
                    return this.currentVersion !== 0;
                }
                // 如果当前表单不存在草稿版本，那么只有最新版本可以编辑，其他版本都不可以编辑
                return this.currentFlowVersionList[0].version !== this.currentVersion;
            } else {
                return true;
            }
        }
    },
    created() {
        // 查询流程信息
        let currentFlowId = this.$route.query.id;
        this.topLoading = true;
        // 查询版本列表
        queryFlowVersionList({id: currentFlowId}).then(res => {
            if (res.code === "200") {
                // 如果返回的list为空，则说明没有历史版本，只有草稿状态
                if (res.data.length === 0) {
                    queryFlowInfo({id: currentFlowId}).then(queryRes => {
                        if (queryRes.code === "200") {
                            let jsonStr = queryRes.data.flowJson
                            this.jsonInfo = JSON.parse(jsonStr)
                            this.currentFlowName = queryRes.data.nameCn + ' - ' + queryRes.data.nameEn;
                        }
                        this.currentVersion = 0
                        this.topLoading = false;
                    }).catch(res => {
                        this.topLoading = false;
                    })
                    // 手动填充一个草稿版本的数据
                    this.currentFlowVersionList.push({
                        innerName: "草稿版本",
                        version: 0
                    })
                } else {
                    for (let index = 0; index < res.data.length; index++) {
                        if (res.data[index].version === 0) {
                            res.data[index].innerName = "草稿版本";
                        } else {
                            res.data[index].innerName = "版本" + res.data[index].version;
                        }
                    }
                    this.currentFlowVersionList = res.data;
                    // 如果当前url中携带了version，则说明当前是查询最新版本
                    let queryVersion = this.$route.query.version
                    if (queryVersion !== null && queryVersion !== undefined) {
                        // 查询当前版本
                        queryFlowVersionInfo({version: queryVersion, resourceId: currentFlowId}).then(versionRes => {
                            if (versionRes.code === "200") {
                                let jsonStr = versionRes.data.flowJson
                                this.jsonInfo = JSON.parse(jsonStr)
                                this.currentFlowName = versionRes.data.nameCn + ' - ' + versionRes.data.nameEn;
                                this.currentVersion = queryVersion;
                            }
                            this.topLoading = false;
                        }).catch(res => {
                            this.topLoading = false;
                        })
                    } else {
                        // 查询最新版本
                        queryFlowVersionInfo({version: res.data[0].version, resourceId: currentFlowId}).then(versionRes => {
                            if (versionRes.code === "200") {
                                let jsonStr = versionRes.data.flowJson
                                this.jsonInfo = JSON.parse(jsonStr)
                                this.currentFlowName = versionRes.data.nameCn + ' - ' + versionRes.data.nameEn;
                                this.currentVersion = res.data[0].version
                            }
                            this.topLoading = false;
                        }).catch(res => {
                            this.topLoading = false;
                        })
                    }
                }
            }
        }).catch(res => {
            this.topLoading = false;
        })
    },

}
</script>

<style scoped lang="less">
.topContainerCard {
    height: 68px;
    margin-top: 6px;
    margin-bottom: 6px;
    z-index: 10000;
}

.topContainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}
</style>